@import 'scss-styles/vars.scss';

$head-font-size: 4rem;
$head-font-size-big: 6rem;
$btn-font-size: 2rem;
$btn-bg: $shade-white;
$line-height-factor: 1;
$bg-img-width: 595px;

.login {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;

  .blurBgImg {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background: fixed no-repeat
      center top 0 / cover url('~assets/bw-2021-mini.jpg');
    filter: blur(20px);
  }

  .loginInner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:
      linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      fixed no-repeat center / auto 100%
      url('~assets/bw-2021-cropped-mini.jpg');

    .greetingSec {
      position: relative;
      width: 100%;
      height: 90%;

      .greetingHeader {
        position: absolute;
        top: 22%;
        width: 100%;
        height: (2 * $head-font-size + $head-font-size-big) * $line-height-factor;
        margin: 0 auto;

        p {
          position: absolute;
          text-align: center;

          color: $white;
          font-size: $head-font-size;
          font-family: 'OPPOSans';
          line-height: $head-font-size * $line-height-factor;
          white-space: nowrap;
          letter-spacing: .3rem;
        }

        &.cnHeader p {
          letter-spacing: .8rem;
        }

        .welcome {
          top: 0;
          right: 50%;
          transform: translateX(6.8rem);
        }

        .linewrapper {
          top: $head-font-size * $line-height-factor;
          width: 100%;
          height: $head-font-size-big * $line-height-factor;
          transform: translateX(-1rem);

          .to {
            bottom: .4rem;
            right: 50%;
            color: $white;
            transform: translateX(-1rem);
          }

          .asoul {
            bottom: 0;
            left: 50%;
            color: $positive-color;
            font-size: $head-font-size-big;
            line-height: $head-font-size-big * $line-height-factor;
            letter-spacing: .3rem !important;
          }
        }

        .museum {
          bottom: 0;
          left: 50%;
          transform: translateX(-1rem);
        }
      }

      .entrance {
        position: absolute;
        bottom: 2%;
        width: 100%;
        margin: auto;
        text-align: center;

        .entBtn {
          width: 90%;
          max-width: $bg-img-width * 0.9;
          height: $btn-font-size * 2;

          color: $positive-color;
          background-color: $btn-bg;

          border-radius: $btn-font-size * 0.3;
          border: none;

          font-size: $btn-font-size;
          line-height: $btn-font-size * 2;

          letter-spacing: .3rem;
          text-indent: .3rem;

          &.cnEntBtn {
            letter-spacing: $btn-font-size;
            text-indent: $btn-font-size;
          }

          &:hover {
            background-color: $positive-color;
            color: $btn-bg;
            cursor: pointer;
          }

          @include reverse-color-transition();
        }
      }
    }

    .langSec {
      width: 100%;
      height: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;

      .langList {
        width: 100%;
        max-width: $bg-img-width;
        margin: auto;
        margin-top: 0;
        padding: 0 12%;
        box-sizing: border-box;

        display: flex;
        justify-content: space-around;
        align-items: center;

        .langItem a {
          color: $white;
          display: inline-block;
          min-width: 3.5rem;
          text-align: center;
          line-height: 200%;

          &.active {
            color: $positive-color;
          }
        }
      }
    }
  }
}
